<template>
  <!-- 饼图 -->
  <div
    style="width: 1200px; height: 600px; margin: 100px auto"
    id="chart"
  ></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.chart();
  },
  methods: {
    chart() {
      //初始化
      var myCharts = this.$echarts.init(document.getElementById("chart"));
      // 数据
      var pieData = [
        { name: "原材料问题", value: 2 },
        { name: "维护保养问题", value: 6 },
        { name: "人员技能与管理", value: 2 },
        { name: "设备能力不足", value: 1 },
        { name: "工装设计问题（非模具）", value: 1 },
      ];
      // 配置项
      var option = {
        //标题
        title: {
          text: "客户投诉发生原因分类",
          textStyle: {
            //文本样式
            color: "#000",
            fontWeight: "700",
          },
          left: "40%", //位置
          top: 20,
        },
        //系列列表
        series: [
          {
            type: "pie", //类型：bar：柱状图，line：折线图，pie：饼装图
            data: pieData,
            color: ["#558DD1", "#D3534F", "#A7CC5B","#8B6BB2","#53BEDA"],
            //显示数值
            label: {
              show: true, //设置显示
              formatter: function (arg) {
                //通过回调函数动态显示文字内容,percent:所占百分比
                return arg.name + ":\n" + arg.percent + "%";
              },
            },
            //线条颜色
            // labelLine : {
            // 	lineStyle : 'red',
            // },
            top: 10,
          },
        ],
        //菜单位置
        legend: {
          orient: "vertical",
          left: "center",
          bottom: "bottom",
        },
        //提示配置
        tooltip: {
          trigger: "item", //触发类型：放在图上
          //   trigger: "axis", //触发类型：放在坐标轴上
          //   triggerOn: "click", //触发方式：click：点击，mouseover：鼠标移入(默认)
          //   formatter: function (arg) {
          // 	  console.log(arg)
          //     //通过回调函数动态显示文字内容,percent:所占百分比
          //     return arg.name + ":\n" + arg.percent + "%";
          //   },
          //   position: "right", //位置
          //   formatter: "{b}:{d}%",
          //   trigger: "axis1",
          //   axisPointer: {
          //     type: "cross",
          //   },
        },
      };
      myCharts.setOption(option);
      window.onresize = function () {
        myCharts.resize();
      };
    },
  },
};
</script>

<style>
</style>